import styled from 'styled-components';
import { GlobalPadding, GlobalMargin, BorderRadius } from '@/config/style-global';

export const ConfigStyle = styled.div`
	height: 50px;
`;

export const MainComStyle = styled.div`
	width: 100%;
	height: calc(100% - 50px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	column-gap: ${GlobalMargin}px;

	.origin-json,
	.type-code {
		flex: 1;
		height: 100%;
		border-radius: ${BorderRadius}px;
		background-color: rgba(0, 0, 0, 0.05);
	}
	.type-code {
		padding: ${GlobalPadding}px;
		overflow-y: auto;
		white-space: pre;
	}

	.origin-json {
		overflow: hidden;
		.json-text {
			width: 100%;
			height: 100%;
			resize: none;
			border: none;
			tab-size: 2;
			border-radius: ${BorderRadius}px;
			padding: ${GlobalPadding}px;
		}
	}
`;

export const CodeColorStyle = styled.div`
	word-spacing: 5px;
	letter-spacing: 1px;
	.divider {
		height: ${GlobalPadding}px;
	}
	.type-interface {
		color: #87207c;
	}
	.type-key {
		color: black;
	}
	.type-optional {
		color: #6b7685;
	}
	.type-ts {
		color: #332aac;
	}
	.type-genericity {
		color: #498293;
	}
`;
